<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>属性过滤器</title>
    <style type="text/css">
      div, span {
        width: 140px;
        height: 140px;
        margin: 20px;
        background: #9999CC;
        border: #000 1px solid;
        float: left;
        font-size: 17px;
        font-family: Roman;
      }

      div.mini {
        width: 30px;
        height: 30px;
        background: #CC66FF;
        border: #000 1px solid;
        font-size: 12px;
        font-family: Roman;
      }


      div.visible {
        display: none;
      }
    </style>
    <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
      //属性过滤器的过滤规则是通过元素的属性来获取相应的元素
      $(function () {
        //*****含有属性title 的div元素.
        $("#b1").click(
                function () {
                  $("div[title]").css("background", "green");
                }
        )

        //****属性title值等于test的div元素
        $("#b2").click(
                function () {
                  $("div[title='test']").css("background", "black");
                }
        )

        //属性title值不等于test的div元素(没有属性title的也将被选中)

        $("#b3").click(
                function () {
                  $("div[title!='test']").css("background", "yellow");
                }
        )

        //属性title值 以te开始 的div元素
        $("#b4").click(
                function () {
                  $("div[title^='te']").css("background", "pink");
                }
        )

        //属性title值 以est结束 的div元素
        $("#b5").click(
                function () {
                  $("div[title$='est']").css("background", "red");
                }
        )

        //属性title值 含有es的div元素
        $("#b6").click(
                function () {
                  $("div[title *= 'es']").css("background", "blue");
                }
        )

        //选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素
        $("#b7").click(
                function () {
                  $("div[id][title *= 'es']").css("background", "purple");
                }
        )
      })
    </script>
  </head>
  <body>
  <input type="button" value="含有属性title 的div元素." id="b1"/><br/><br/>
  <input type="button" value="属性title值等于test的div元素" id="b2"/><br/><br/>
  <input type="button" value="属性title值不等于test的div元素(没有属性title的也将被选中)" id="b3"/><br/><br/>
  <input type="button" value="属性title值 以te开始 的div元素" id="b4"/><br/><br/>
  <input type="button" value="属性title值 以est结束 的div元素" id="b5"/><br/><br/>
  <input type="button" value="属性title值 含有es的div元素" id="b6"/><br/><br/>
  <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素" id="b7"/><br/><br/>

  <div id="one" title="test">
    div id为one test
  </div>

  <div id="one-1" title="texxx">
    div id为one-1 texxx
  </div>

  <div id="one-2" title="xxxest">
    div id为one-2 xxxest
  </div>

  <div id="one-3" title="xxxesxxxxxt">
    div id为one-3 xxxesxxxxxt
  </div>

  <div id="two" title="ate">
    div id为two
  </div>

  <div id="three" class="one">
    div id为three
  </div>
  </body>
</html>